<template>
	<div class="base-info-content">
		<el-form ref="ruleFormRef" :model="goodsInfoData" :rules="rules" label-width="160px">
			<section class="font16 px10 pl20 borderRadius5 mb20" style="background:var(--el-color-primary-light-9);">
				<p class="flex" style="align-items:center">商品权限 <el-icon class="ml5 mr5"><QuestionFilled /></el-icon> <span class="font14">无权限浏览则该商品不展示给会员；无购买权限仅支持查看商品，不支持购买商品。</span></p>
			</section>
			<el-form-item label="浏览权限：" prop="browseAuthority">
				<section style="width:100%">
					<el-checkbox-group v-model="goodsInfoData.browseAuthority">
						<el-checkbox :label=1 :key=1
								:disabled="goodsInfoData.browseAuthority.includes(2) || 
								goodsInfoData.browseAuthority.includes(4) || 
								goodsInfoData.browseAuthority.includes(8)" >不限制</el-checkbox>
						<el-checkbox :label=2 :key=2 :disabled="goodsInfoData.browseAuthority.includes(1)">指定会员等级可见</el-checkbox>
						<el-checkbox :label=4 :key=4 :disabled="goodsInfoData.browseAuthority.includes(1)">指定付费会员等级可见</el-checkbox>
						<el-checkbox :label=8 :key=8 :disabled="goodsInfoData.browseAuthority.includes(1)">指定标签组可见</el-checkbox>
					</el-checkbox-group>
					<el-col :span="24" v-if="!goodsInfoData.browseAuthority.includes(1)">
						<section v-if="goodsInfoData.browseAuthority.includes(2)" class="px10 mb10 borderRadius5" style="background:var(--el-color-primary-light-9);">
							<el-tag @close="delTag('borwseMember',index)" v-for="(item, index) of goodsInfoData.borwseMember" :key="index" class="mr15" closable>
								{{ item.dictName }}
							</el-tag>
							<el-tag color="var(--el-color-primary)" style="color:var(--el-color-white)" @click="addTag('borwseMember')" class="mr15">
								添加会员等级
							</el-tag>
						</section>
						<section v-if="goodsInfoData.browseAuthority.includes(4)" class="px10 mb10 borderRadius5" style="background:var(--el-color-primary-light-9);">
							<el-tag @close="delTag('borwsePaidMember',index)" v-for="(item, index) of goodsInfoData.borwsePaidMember" :key="index" class="mr15" closable>
								{{ item.dictName }}
							</el-tag>
							<el-tag color="var(--el-color-primary)" style="color:var(--el-color-white)" @click="addTag('borwsePaidMember')" class="mr15">
								添加付费会员等级
							</el-tag>
						</section>
						<section v-if="goodsInfoData.browseAuthority.includes(8)" class="px10 mb10 borderRadius5" style="background:var(--el-color-primary-light-9);">
							<el-tag @close="delTag('borwseLaber',index)" v-for="(item, index) of goodsInfoData.borwseLaber" :key="index" class="mr15" closable>
								{{ item.dictName }}
							</el-tag>
							<el-tag color="var(--el-color-primary)" style="color:var(--el-color-white)" @click="addTag('borwseLaber')" class="mr15">
								添加标签组
							</el-tag>
						</section>
					</el-col>
				</section>
			</el-form-item>
			<el-form-item label="购买权限：" prop="buyAuthority">
				<section style="width:100%">
					<el-checkbox-group v-model="goodsInfoData.buyAuthority">
						<el-checkbox :label=1 :key=1
								:disabled="goodsInfoData.buyAuthority.includes(2) || 
								goodsInfoData.buyAuthority.includes(4) || 
								goodsInfoData.buyAuthority.includes(8)" >不限制</el-checkbox>
						<el-checkbox :label=2 :key=2 :disabled="goodsInfoData.buyAuthority.includes(1)">指定会员等级购买</el-checkbox>
						<el-checkbox :label=4 :key=4 :disabled="goodsInfoData.buyAuthority.includes(1)">指定付费会员等级购买</el-checkbox>
						<el-checkbox :label=8 :key=8 :disabled="goodsInfoData.buyAuthority.includes(1)">指定标签组购买</el-checkbox>
					</el-checkbox-group>
					<el-col :span="24" v-if="!goodsInfoData.buyAuthority.includes(1)">
						<section v-if="goodsInfoData.buyAuthority.includes(2)" class="px10 mb10 borderRadius5" style="background:var(--el-color-primary-light-9);">
							<el-tag @close="delTag('buyMember',index)" v-for="(item, index) of goodsInfoData.buyMember" :key="index" class="mr15" closable>
								{{ item.dictName }}
							</el-tag>
							<el-tag color="var(--el-color-primary)" style="color:var(--el-color-white)" @click="addTag('buyMember')" class="mr15">
								添加会员等级
							</el-tag>
						</section>
						<section v-if="goodsInfoData.buyAuthority.includes(4)" class="px10 mb10 borderRadius5" style="background:var(--el-color-primary-light-9);">
							<el-tag @close="delTag('buyPaidMember',index)" v-for="(item, index) of goodsInfoData.buyPaidMember" :key="index" class="mr15" closable>
								{{ item.dictName }}
							</el-tag>
							<el-tag color="var(--el-color-primary)" style="color:var(--el-color-white)" @click="addTag('buyPaidMember')" class="mr15">
								添加付费会员等级
							</el-tag>
						</section>
						<section v-if="goodsInfoData.buyAuthority.includes(8)" class="px10 mb10 borderRadius5" style="background:var(--el-color-primary-light-9);">
							<el-tag @close="delTag('buyLaber',index)" v-for="(item, index) of goodsInfoData.buyLaber" :key="index" class="mr15" closable>
								{{ item.dictName }}
							</el-tag>
							<el-tag color="var(--el-color-primary)" style="color:var(--el-color-white)" @click="addTag('buyLaber')" class="mr15">
								添加标签组
							</el-tag>
						</section>
					</el-col>
				</section>
			</el-form-item>
			<section class="font16 px10 pl20 borderRadius5 mb20" style="background:var(--el-color-primary-light-9);">
				<p>商品限购</p>
			</section>
			
			<el-form-item label="商品限购：" prop="quotaAuthority">
				<el-radio-group v-model="goodsInfoData.quotaAuthority" @change="restrictedPurchaseChange">
					<el-radio :label=1>不限购</el-radio>
					<el-radio :label=2>统一限购</el-radio>
					<el-radio :disabled="goodsInfoData.skuList.length == 0" :label=3>单一限购</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="单次最少限购：" prop="onceRestrictedPurchaseMinNum" v-if="goodsInfoData.quotaAuthority === 2">
				<el-input v-model="goodsInfoData.onceRestrictedPurchaseMinNum" class="width260" placeholder="请输入统一限购数量最大值999" />
			</el-form-item>
			<el-form-item label="单次最多限购：" prop="onceRestrictedPurchaseMaxNum" v-if="goodsInfoData.quotaAuthority === 2">
				<el-input v-model="goodsInfoData.onceRestrictedPurchaseMaxNum" class="width260" placeholder="请输入统一限购数量最大值999" />
			</el-form-item>
			<el-form-item label="永久限购数：" prop="longRestrictedPurchaseNumber" v-if="goodsInfoData.quotaAuthority === 2">
				<el-input v-model="goodsInfoData.longRestrictedPurchaseNumber" class="width260" placeholder="请输入统一限购数量最大值999" />
			</el-form-item>
			<el-form-item label=""  v-if="goodsInfoData.quotaAuthority == 3">
				<el-table :data="goodsInfoData.skuList" border >
					<el-table-column v-for="(item, index) of goodsInfoData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column>
					<el-table-column v-for="(item, index) of props.restrictBuyList" :label="item.dictName" :key="index" show-overflow-tooltip>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.restrictBuyData.restrictBuyItem${item.dictValue}`" 
								:rules="[{ required: true, message: '不能为空', trigger:'blur'}, { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }]">
								<el-input class="widthauto" v-model="scope.row.restrictBuyData[`restrictBuyItem${item.dictValue}`]" placeholder="限购数量"></el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
		</el-form>
		<section style="text-align: center; margin: 10px 0;">
			<el-button type="primary" @click="previousStep">上一步</el-button>
			<el-button type="primary" @click="nextStep(ruleFormRef)">下一步</el-button>
		</section>
		<tagSelect ref="tagSelectRef" @selectTagFun="selectTagFun"></tagSelect>
	</div>
</template>

<script setup lang="ts" name="funWangEditor">
import { ref, reactive, onMounted, defineAsyncComponent } from 'vue';
import { Plus,QuestionFilled } from '@element-plus/icons-vue'
const emit = defineEmits(['stepChange'])
import { goodsInfo } from '/@/stores/goods';
const goodsInfoData = goodsInfo()
const tagSelect = defineAsyncComponent(() => import('/@/components/dialog/tagSelect.vue'))
const tagSelectRef = ref()
const ruleFormRef = ref<FormInstance>()
// 定义父组件传过来的值
const props = defineProps({
	restrictBuyList: {
		type: Array,
	},
});

const rules = reactive<FormRules<any>>({
	browseAuthority: [{ type: 'array', required: true, message: '至少选择一项', trigger:'change'}],
	buyAuthority: [{ type: 'array', required: true, message: '至少选择一项', trigger:'change'}],
	quotaAuthority: [{ required: true, message: '请选择限购类型', trigger: 'change', }],
	restrictBuyType: [{ required: true, message: '请选择限购类型', trigger: 'change', }],
	onceRestrictedPurchaseNumber: [{ required: true, message: '请输入单次限购数量', trigger: 'blur', }],
	longRestrictedPurchaseNumber: [{ required: true, message: '请输入永久限购数量', trigger: 'blur', }],
	storeSales: [{ type: 'array', required: true, message: '至少选择一项', trigger:'change'}],
	storeService: [{ type: 'array', required: true, message: '至少选择一项', trigger:'change'}],
	salesOnlineChannel: [{ type: 'array', required: true, message: '至少选择一项', trigger:'change'}],
})



// 标签组删除
const delTag = (type:String,index:any) => {
	goodsInfoData[type].splice(index,1)
}

// 添加标签组， 购买，浏览等权限
const addTag = (value:any) => {
	tagSelectRef.value.openDialog(value,goodsInfoData[value]);
}

// 选中的标签
const selectTagFun = (type:String,tagItem:any) =>{
	goodsInfoData[type] = tagItem
}


// 页面加载时
onMounted(() => {
	// 获取门店列表
});

// 上一步
const previousStep = () => {
	emit('stepChange', 'third')
}

// 下一步
const nextStep = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			emit('stepChange', 'sixth')
		} else {
			ElMessage.warning('请补全商品信息');
			// skuListFormRef.value.validate();
		}
	})
}
</script>

<style lang="scss" scoped>
.base-info-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-form{
		flex:1;
		overflow-y: auto;
		position: relative;
	}
}
</style>
